<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >报名课程</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content" v-if="classList.length > 0">
      <div
        class="box"
        @click="toClass(item)"
        v-for="(item, index) in classList"
        :key="index"
      >
        <van-image width="2.5rem" height="1rem" :src="item.banner" />
        <div class="titles">
          <p>
            {{ item.title }}
          </p>
          <p>
            {{ item.content }}
          </p>
        </div>
      </div>
    </div>
    <div class="else-class" v-else>
      <van-image
        width="1rem"
        height="1rem"
        :src="require('../../assets/images/null.png')"
      />
      <p>暂无课程</p>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog } from "vant";
import { getEnroll } from "@/api/doctor";
import { mapGetters } from "vuex";
export default {
  name: "signClass",
  data() {
    return {
      classList: [],
    };
  },

  components: { navbar },

  computed: { ...mapGetters(["userData"]) },

  created() {
    this.getList();
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/dMine" });
    },
    // 列表
    getList() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      let data = {
        userId: JSON.parse(this.userData).id,
      };
      getEnroll(data).then((res) => {
        if (res.data.status == 200) {
          this.classList = res.data.info;
          Toast.clear();
        } else {
          Toast.fail('加载失败')
        }
      });
    },
    // 课程详情
    toClass(item) {
      this.$router.push({
        name: "classDetail",
        params: {
          classId: item.classId,
        },
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  & .content {
    width: 95%;
    margin: auto;
    margin-top: 0.1rem;
    & .box {
      background: #ffffff;
      box-shadow: 0rem 0rem 0.06rem #b1b1b1;
      padding: 0.1rem;
      border-radius: 0.1rem;
      display: flex;
      margin-bottom: 0.15rem;
      & .titles {
        width: 55%;
        text-align: left;
        line-height: 0.2rem;
        margin-left: 0.1rem;
        & p:nth-of-type(1) {
          font-size: 0.16rem;
          color: #fd6666;
          //   width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        & p:nth-of-type(2) {
          font-size: 0.16rem;
          margin-top: 0.15rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.else-class {
  margin: auto;
  margin-top: 1rem;
  & p {
    font-size: 0.14rem;
    color: #999999;
  }
}
</style>